<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
    <li>07</li>
    <li>08</li>
    <li>09</li>
    <li>10</li>
</body>
<script>
    var liList = document.querySelectorAll("li");
    console.log(liList);
    
    for (var i = 0; i < liList.length; i++) {
        var li = liList[i];
        li.setAttribute("data-index",i);
        li.onclick = function () {
            // debugger;
            var index = Array.from(liList).indexOf(this);
            console.log(this, index);
        }
    }

    console.log("页面加载完毕",li,i);
</script>
</html>